<template>
    <div class="analysis-animation" :class="{ 'fade-out': completed }">
        <div class="animation-container">
            <div class="brain-scan">
                <div class="brain-outline">
                    <svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
                        <path
                            class="brain-path"
                            d="M100,20 C140,20 170,50 170,100 C170,150 140,180 100,180 C60,180 30,150 30,100 C30,50 60,20 100,20 Z"
                        />
                        <path
                            class="brain-detail"
                            d="M70,50 C80,40 120,40 130,50 C140,60 140,80 130,90 C120,100 120,110 130,120 C140,130 140,150 130,160 C120,170 80,170 70,160 C60,150 60,130 70,120 C80,110 80,100 70,90 C60,80 60,60 70,50 Z"
                        />
                        <path class="scan-line" d="M30,100 L170,100" />
                    </svg>
                </div>
            </div>

            <div class="data-processing">
                <div class="processing-text">{{ currentProcessingText }}</div>
                <div class="progress-bar">
                    <div class="progress" :style="{ width: `${progress}%` }"></div>
                </div>
                <div class="data-points">
                    <div
                        v-for="(point, index) in dataPoints"
                        :key="index"
                        class="data-point"
                        :style="{
                            left: `${point.x}%`,
                            top: `${point.y}%`,
                            opacity: point.opacity,
                            backgroundColor: point.color,
                        }"
                    ></div>
                </div>
            </div>

            <div class="completion-message" v-if="progress >= 100">
                <div class="message">分析完成</div>
                <!-- <button @click="emitComplete" class="view-results-btn">查看结果</button> -->
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, computed, onUnmounted } from 'vue'

const props = defineProps({
    duration: {
        type: Number,
        default: 5000, // 动画持续时间，默认5秒
    },
})

const emit = defineEmits(['complete'])

const progress = ref(0)
const completed = ref(false)
const dataPoints = ref<Array<{ x: number; y: number; opacity: number; color: string }>>([])
const processingTexts = ['收集数据...', '分析人格特质...', '匹配九型人格模型...', '生成个性化报告...', '完成分析']
const currentProcessingIndex = ref(0)
const currentProcessingText = computed(() => {
    return processingTexts[currentProcessingIndex.value]
})

let animationInterval: number | null = null
let dataPointInterval: number | null = null

const generateDataPoint = () => {
    const colors = ['#4F46E5', '#818CF8', '#6366F1', '#A5B4FC']
    dataPoints.value.push({
        x: Math.random() * 100,
        y: Math.random() * 100,
        opacity: 1,
        color: colors[Math.floor(Math.random() * colors.length)],
    })

    // 限制数据点数量
    if (dataPoints.value.length > 50) {
        dataPoints.value.shift()
    }

    // 降低所有点的不透明度
    dataPoints.value.forEach((point) => {
        point.opacity -= 0.02
        if (point.opacity < 0) point.opacity = 0
    })

    // 移除不可见的点
    dataPoints.value = dataPoints.value.filter((point) => point.opacity > 0)
}

const startAnimation = () => {
    const step = 100 / (props.duration / 50) // 每50ms的进度增量

    animationInterval = window.setInterval(() => {
        progress.value += step

        // 更新处理文本
        const textChangePoints = [20, 40, 60, 80, 100]
        const currentTextIndex = textChangePoints.findIndex((point) => progress.value < point)
        if (currentTextIndex !== -1) {
            currentProcessingIndex.value = currentTextIndex
        }

        if (progress.value >= 100) {
            progress.value = 100
            clearInterval(animationInterval as number)
            setTimeout(() => {
                clearInterval(dataPointInterval as number)
            }, 1000)
            completed.value = true
            emit('complete')
        }
    }, 50)

    // 生成数据点
    dataPointInterval = window.setInterval(generateDataPoint, 100)
}

const emitComplete = () => {
    completed.value = true
    setTimeout(() => {
        emit('complete')
    }, 500) // 等待淡出动画完成
}

onMounted(() => {
    startAnimation()
})

onUnmounted(() => {
    if (animationInterval !== null) {
        clearInterval(animationInterval)
    }
    if (dataPointInterval !== null) {
        clearInterval(dataPointInterval)
    }
})
</script>

<style scoped>
.analysis-animation {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(15, 23, 42, 0.95);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    transition: opacity 0.5s ease;
}

.fade-out {
    opacity: 0;
}

.animation-container {
    max-width: 600px;
    width: 90%;
    background-color: rgba(30, 41, 59, 0.8);
    border-radius: 16px;
    padding: 2rem;
    box-shadow: 0 0 30px rgba(79, 70, 229, 0.3);
    border: 1px solid rgba(79, 70, 229, 0.2);
    display: flex;
    flex-direction: column;
    align-items: center;
    backdrop-filter: blur(10px);
}

.brain-scan {
    width: 200px;
    height: 200px;
    margin-bottom: 2rem;
    position: relative;
}

.brain-outline {
    width: 100%;
    height: 100%;
}

.brain-path {
    fill: none;
    stroke: rgba(79, 70, 229, 0.7);
    stroke-width: 2;
    stroke-dasharray: 10;
    animation: dash 3s linear infinite;
}

.brain-detail {
    fill: none;
    stroke: rgba(129, 140, 248, 0.7);
    stroke-width: 1.5;
    stroke-dasharray: 8;
    animation: dash 5s linear infinite reverse;
}

.scan-line {
    stroke: rgba(165, 180, 252, 0.9);
    stroke-width: 2;
    stroke-dasharray: 5;
    animation: scan 2s linear infinite;
}

@keyframes dash {
    to {
        stroke-dashoffset: 100;
    }
}

@keyframes scan {
    0% {
        transform: translateY(-80px);
        opacity: 0;
    }
    20% {
        opacity: 1;
    }
    80% {
        opacity: 1;
    }
    100% {
        transform: translateY(80px);
        opacity: 0;
    }
}

.data-processing {
    width: 100%;
    position: relative;
    margin-bottom: 2rem;
}

.processing-text {
    color: #e0e7ff;
    font-size: 1.2rem;
    margin-bottom: 1rem;
    text-align: center;
    font-weight: 500;
    letter-spacing: 0.5px;
    text-shadow: 0 0 10px rgba(79, 70, 229, 0.5);
}

.progress-bar {
    width: 100%;
    height: 8px;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    overflow: hidden;
    position: relative;
}

.progress {
    height: 100%;
    background: linear-gradient(90deg, #4f46e5, #818cf8);
    border-radius: 4px;
    transition: width 0.1s ease;
    position: relative;
    overflow: hidden;
}

.progress::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(100%);
    }
}

.data-points {
    position: absolute;
    top: -50px;
    left: 0;
    width: 100%;
    height: 200px;
    pointer-events: none;
}

.data-point {
    position: absolute;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    transition: opacity 0.5s ease;
}

.completion-message {
    text-align: center;
    margin-top: 1rem;
    animation: fadeIn 0.5s ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.message {
    color: #e0e7ff;
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 1rem;
    text-shadow: 0 0 15px rgba(79, 70, 229, 0.7);
}

.view-results-btn {
    background: linear-gradient(135deg, #4f46e5, #818cf8);
    color: white;
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 0 15px rgba(79, 70, 229, 0.5);
}

.view-results-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 20px rgba(79, 70, 229, 0.7);
}

.view-results-btn:active {
    transform: translateY(0);
}
</style>
